<template>
    <div class="app-container">
        <div class="ces-main">

            <el-form :inline="true" :model="Search" class="demo-form-inline" size="mini">
                <el-col :xs="10" :sm="8" :lg="6" :xl="4">
                    <el-tabs v-model="Search.Status" @tab-click="refresh">
                        <el-tab-pane v-for="item in cities" :label="item.label" :name="item.value"
                            :key="item.value"></el-tab-pane>
                    </el-tabs>

                </el-col>
                <el-col :xs="10" :sm="8" :lg="6" :xl="4">
                    <el-tabs v-model="Search.BillState" @tab-click="refresh">
                        <el-tab-pane v-for="item in BillStatecities" :label="item.label" :name="item.value"
                            :key="item.value"></el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-form>
            <v-GetToolBar align="right" :MenuCode="MenuCode" :IsfunEdit='IsfunEdit' :Isfunfail='Isfunfail'
                @handeAdd='handeAdd' @handleEdit='handleEdit' @OpenFindForm='OpenFindForm'
                @handlexportData='handlexportData' @IsfunEdit='handleIsfunEdit' @IsfunDelete='handleIsfunfail'
                @handleclose='handleclose'></v-GetToolBar>


            <ces-table size='mini' :isSelection='false' :isIndex='true' :isSearch='true' :isHandle='false'
                :IsfunEdit='true' :Isfunfail='true' :tableData='tableData' :tableCols='tableCols' :Search='Search'
                @refresh="refresh" @handleEdit='handleEdit' @handleDelete="delData" @handrowclick="handrowclick">
            </ces-table>
        </div>

        <!--搜索弹框-->
        <el-dialog title="搜索" :visible.sync="SearchDialog" custom-class="dialogClass" class="searchDialog" center
            ref="searchDialog" :modal="false" :close-on-click-modal="true">
            <el-form :model="Search" label-width="90px" ref="searchForm">

                <Search-Form ref="form" :frame="true" size='mini' labelWidth='50px' :searchData='Search'
                    :tableCols='tableCols' :searchHandle="searchHandle"></Search-Form>
            </el-form>
            <div slot="footer" :style="{ 'margin-buttom': 0 == 0 ? DialogBtnMargin : DialogBtnMargin }">
                <el-button @click="reform()">重置</el-button>
                <el-button type="primary" @click="refresh()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dialogVisible" width="800px" top="20px">
            <!-- {{this.FormData}} -->
            <el-form :model="name" label-width="80px" label-position="right">
                <el-tabs type="border-card">
                    <el-tab-pane label="">
                        <el-form :model="FormData" label-width="90px" ref="MianForm">
                            <Mian-Form ref="form" labelWidth='100px' :FormData='FormData' :tableCols='tableCols' :StepSN='0'
                                :searchHandle="searchHandle"></Mian-Form>
                        </el-form>
                    </el-tab-pane>
                    <div style="float:right ">
                        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
                        <el-button type="primary" @click="handleSave()">保存</el-button>
                    </div>
                </el-tabs>
            </el-form>
        </el-dialog>


    </div>
</template>
    
<script>


//引入组件

import cesTable from "../Common//table.vue";
import SearchForm from "../Common//Search.vue";
import MianForm from "../Common//form.vue";

import { funDownload, GetTableColsData } from "@/api/Common";
import { getDataList, UpdateForm, DeleteForm ,DeleteRow} from '@/api/MesQMS/QMSSelfReport';
import vGetToolBar from "../Common/GetToolBar";

export default {
    name: "QAcheckupReportBill",
    data() {
        //表单查询一般分为input，下拉框，和日期，下面是下拉框时的设置下拉信息的情况，我的项目没有用到，但是留着方便看

        return {
            MenuCode: "A050908",
            tableData: [],//表格数据
            tableCols: [],//表格列数据
            searchHandle: [],
            billID: "",
            IsfunEdit: false,
            Isfunfail: false,
            Search: {
                // 查询条件
                total: 0, // 总记录数
                pageSize: 13, // 一页显示的记录数
                page: 1, // /当前页码
                RNO: "007", // 表编号  根据Controller中对应的表编号
                jsWhere: "", // 自定义条件
                Status: 0,
                BillState: "BillStateALL",

            },
            cities: [
                {
                    value: "ALL",
                    label: "ALL",
                },
                {
                    value: "0",
                    label: "草稿",
                },
                {
                    value: "1",
                    label: "审核中",
                },
                {
                    value: "2",
                    label: "结案",
                },
                {
                    value: "3",
                    label: "作废",
                },
            ], BillStatecities: [
                {
                    value: "BillStateALL",
                    label: "ALL",
                },
                {
                    value: "0",
                    label: "未完成",
                },
                {
                    value: "2",
                    label: "已完成",
                }],
            SearchDialog: false,
            DialogBtnMargin: 0,
            dialogVisible: false,

        }
    },

    components: { //引入组件后注册组件
        cesTable,
        vGetToolBar,
        SearchForm,
        MianForm
    },
    mounted() {
        this.getTableCols()
        this.getDataList()
    },
    methods: {
        //搜索重置
        refresh() {
            this.getDataList();
        },
        reform() {
            this.Search = {
                // 查询条件
                // total: 0, // 总记录数
                pageSize: 13, // 一页显示的记录数
                page: 1, // /当前页码
                RNO: "007", // 表编号  根据Controller中对应的表编号
                jsWhere: "", // 自定义条件
                Status: 0,
                BillState: "BillStateALL",
            };
            this.getDataList();
        },
        //读取列配置
        async getTableCols() {
            this.tableCols = []
            const res = await GetTableColsData({ InterID: "1616" });
            this.tableCols = res.data;

        },
        async getDataList() {

            // const res = await getDataList({ data: JSON.stringify(this.Search) });
            // this.tableData = res.data.Table;
            // alert(2)
            const res = await getDataList({ data: JSON.stringify(this.Search) });
            // alert(1)
            // debugger
            this.tableData = res.data.Table;

            //将data 中的数据放到DataList中
            this.Search.total = res.data.Table1[0].RecordCount;
            this.billID = "";
        }, OpenFindForm() {
            //打开搜索框
            this.SearchDialog = true;
            //计算外边距
            console.log(this.$refs.searchDialog.offsetHeight);
            this.DialogBtnMargin = this.$refs.searchDialog.offsetHeight - 40;
        }, handlexportData() {
            funDownload("1570", JSON.stringify(this.Search));
        }, handleIsfunEdit() {
            this.IsfunEdit = true;
        }, handleIsfunfail() {
            this.Isfunfail = true;
        }, async handeAdd() {
            // 新建
            let routeUrl = this.$router.push({
                path: "/MesQMS/QMSSelfReportForm",
                query: { billID: '', IsPostBack: false },
            });
            window.open(routeUrl.path, "_top");

        },
        async handleEdit(scope) {
            // 修改

            let routeUrl = this.$router.push({
                path: "/MesQMS/QMSSelfReportForm",
                query: { billID: scope.row.billID, IsPostBack: false },
            });
            window.open(routeUrl.href, "_top");

            this.inputName = row.billID;


        }, delData({ $index, row }) {
            this.$confirm('删除操作, 是否继续?', '提示', {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {


                    // debugger
                    const result = await DeleteRow({

                        billID: row.billID,
                        ID:row.CustomerCode
                    });
                    // debugger
                    this.getDataList();
                    this.$message({
                        type: "success",
                        message: result.msg,
                    });

                })
                .catch((err) => {
                    console.error(err);
                });
        },
        handrowclick(row) {
            this.billID = row.billID;
        }, handleclose() {


            if (this.billID != "") {

                this.$confirm('关单操作, 是否继续? 订单号：' + this.billID, '提示', {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                })
                    .then(async () => {



                        const result = await CloseForm({

                            billID: this.billID,
                            types: 1,
                            IsPostBack: false,
                        });
                        this.getDataList();
                        this.$message({
                            type: "success",
                            message: result.msg,
                        });

                    })
                    .catch((err) => {
                        console.error(err);
                    });
            } else {
                this.$notify({
                    title: "关单操作，请选择数据",
                    dangerouslyUseHTMLString: true,
                    message: "",
                    type: "error",
                });
            }



        },


    }
}
</script>
    
<style lang="scss" scoped>
.app-container {
    .EditObjs-table {
        margin-top: 30px;
    }

    .permission-tree {
        margin-bottom: 5px;
    }
}

.searchDialog ::v-deep .el-dialog__header {
    background: #409eff;
}

.searchDialog ::v-deep .el-dialog__title {
    color: #fff;
}

.searchDialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
}
</style>